<html>
    <head>
        <title>js的使用1 </title>
    </head>
    <body>
        <h1>用户登录</h1>
        <br>
        <p>用户名：<input type="text" id="username"/> </p>
        <p>密码：<input type="password" id="password"/> </p>
        <p>验证码：<input type="text" id="userCode"/>
               <input type="text" readonly id="randCode"
                      onclick="createRandCode()"
               />
        </p>
        <p>
          <input type="button" value="登录" onclick="checkLogin()"/>
        </p>
    </body>
</html>
<script>
    /*readonly：只读属性*/
    /*根据当前时间的不同，显示不同的问候语*/
    //1.获得当前时间对象
    var dt=new Date();
    //获得当前时间对象的小时数
    var hour=dt.getHours();
    //3.判断hour所属时间段范围,提示不同的问候语
    if(hour>=4&&hour<=8)
           alert("早上好!");//弹出一个框
    else if(hour>8&&hour<=12)
           alert("上午好!");
    else if(hour>12&&hour<=18)
           alert("下午好!")
    else if(hour>18&&hour<=23)
           alert("晚上好!");
    else alert("夜深了，快快睡觉!");
</script>
<script>
    function createRandCode(){
    /*产生一个4位的随机数字，填入到界面上的输入框中*/
    //Math.random()产生[0,1)直接的一个小数
    var code="";
    for(var i=1;i<=4;i++)
        code+=Math.trunc(Math.random()*10);
    //获得随机数存放的输入框的对象，trunc()取整
    var obj=document.getElementById("randCode");
    //将产生的验证码code填充到里面
    obj.value=code;
    }
    createRandCode();//页面打开时，第一次调用
</script>
<script>
    //定义进行登录验证的方法
    function checkLogin(){
        /*判断验证码是否正确*/
        var codel=document.getElementById("randCode").value;
        var code2=document.getElementById("userCode").value;
        if(code1!=code2){
            alert("输入的验证码错误!")
            createRandCode();
            document.getElementById("userCode").value="";
        }
    //校验用户名和密码
    var username=document.getElementById("username").value;
    var pwd=document.getElementById("password").value;
    if(uname=="DJ"&&pwd=="123"){
        alert("登陆成功！");
    }else{
        alert("登录失败！")
        createRandCode();
    }
    }
</script>
